import React, { Component, useState } from "react";

function TodoList() {
  // const [初始值常量,修改值的方法]=useState(默认值)
  const [v, setV] = useState("");
  //   const [showElem,setShow] = useState(false);
  const [list, setList] = useState([]);
  const [doingnum, setDoingnum] = useState(0);
  const [donenum, setDonenum] = useState(0);
  //   const [lists, setLists] = useState([]);
  //   const [listss, setListss] = useState([]);

  //监听输入的任务项
  const handleChange = (e) => {
    setV(e.target.value);
  };

  //添加任务
  const add = () => {
    // console.log(v)

    list.push({ checked: false, title: v });
    //先添加

    const listdoing = list.filter((item) => item.checked === false).length;
    const listdone = list.filter((item) => item.checked === true).length;
    setList([...list]);
    setDoingnum(listdoing);
    setDonenum(listdone);

    // let newList = [...list, { checked: false, title: v }];
    // //     //先添加
    // setList(newList);

    //后清空
    setV("");
  };
  const change = (status, index) => {
    // console.log(status,index);

    if (status === false) {
      list[index].checked = true;
      const listdoing = list.filter((item) => item.checked === false).length;
      const listdone = list.filter((item) => item.checked === true).length;
      setList([...list]);
      setDoingnum(listdoing);
      setDonenum(listdone);
      //  setShow(true);

      console.log(list);
    } else {
      list[index].checked = false;
      const listdoing = list.filter((item) => item.checked === false).length;
      const listdone = list.filter((item) => item.checked === true).length;
      setList([...list]);
      setDoingnum(listdoing);
      setDonenum(listdone);
      //   setShow(false);
    }
  };

  //删除指定任务
  const deleteItem = (i) => {
    list.splice(i, 1);
    setList([...list]);

    const listdoing = list.filter((item) => item.checked === false).length;
    const listdone = list.filter((item) => item.checked === true).length;
    setDoingnum(listdoing);
    setDonenum(listdone);
  };
  return (
    <div>
      <h2>TodoList</h2>
      <div className="todo">
        <div>
          <input type="text" value={v} onChange={handleChange} />
          <button onClick={add}>添加</button>
        </div>
        <div className="list">
          <ul>
            正在完成{doingnum}：
            {list.map((item, index) => {
              return item.checked === false ? (
                <li key={index}>
                  <input
                    type="checkbox"
                    checked={item.checked}
                    onChange={() => change(item.checked, index)}
                  />
                  {item.title}
                  <button onClick={() => deleteItem(index)}>删除</button>
                </li>
              ) : null;
            })}
          </ul>
        </div>
        <div className="list2">
          {
            <ul>
              已完成{donenum}
              {list.map((item, index) => {
                return item.checked ? (
                  <li key={index}>
                    <input
                      type="checkbox"
                      checked={item.checked}
                      onChange={() => change(item.checked, index)}
                    />
                    {item.title}
                    <button onClick={() => deleteItem(index)}>删除</button>
                  </li>
                ) : null;
              })}
            </ul>
          }
        </div>
      </div>
    </div>
  );
}

class App extends Component {
  render() {
    return (
      <div>
        <TodoList></TodoList>
      </div>
    );
  }
}

export default App;
